<template>
  <a-card :bordered="false">
    <div class="ant-descriptions-title">店员统计</div>
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="4" :sm="24">
            <a-form-item>
              <a-range-picker @change="onChange" v-model="dataRange">
                <a-icon slot="suffixIcon" type="calendar" />
              </a-range-picker>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <a-form-item>
              <a-input placeholder="请输入名称/手机号" v-model="queryParam.search" />
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="handleSearch(true)" icon="search">查询</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columnsShow"
      :data="loadData"
      :pagination="pagination"
    >
      <template slot="head_img" slot-scope="text">
        <a-avatar shape="square" :size="32" icon="skin" :src="text" />
      </template>
    </s-table>
  </a-card>
</template>

<script>
import formTableMixin from '@/mixins/formTableMixin'
import moment from 'moment'
const columns = [
  {
    title: '头像',
    dataIndex: 'head_img',
    scopedSlots: { customRender: 'head_img' }
  },
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '电话',
    dataIndex: 'mobile'
  },
  {
    title: '取单量',
    dataIndex: 'take_count'
  },
  {
    title: '送单量',
    dataIndex: 'send_count'
  }
]

const columns2 = [
  {
    title: '头像',
    dataIndex: 'head_img',
    scopedSlots: { customRender: 'head_img' }
  },
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '电话',
    dataIndex: 'mobile'
  },
  {
    title: '服务单量',
    dataIndex: 'take_count'
  }
]
export default {
  mixins: [formTableMixin],
  props: {
    data: {
      type: Function,
      default: () => {}
    },
    type: {
      type: String,
      default: 'clothes'
    }
  },
  data () {
    this.columns = columns
    this.columns2 = columns2
    this.listAction = parameter => {
      const routeParams = {
        store_id: this.$route.query.id,
        store_type: this.$route.query.type
      }
      return this.data({ ...parameter, ...routeParams }).then(res => {
        this.onChange(undefined, [res.data.atime, res.data.etime])
        this.dataRange = [moment(res.data.atime), moment(res.data.etime)]
        return res
      })
    }
    return {
      dataRange: [],
      queryParam: {}
    }
  },
  computed: {
    columnsShow () {
      switch (this.type) {
        case 'clothes':
          return this.columns
        default:
          return this.columns2
      }
    }
  },
  methods: {
    onChange (date, dateString) {
      console.log(date, dateString)
      this.queryParam.atime = dateString[0]
      this.queryParam.etime = dateString[1]
    }
  }
}
</script>

<style></style>
